import type { Meta } from '@storybook/react';
import { MuiTable } from '../components';
import { useState } from 'react';

interface DataType {
  name: string;
  age: number;
  address: string;
  tags: string[];
}

const meta: Meta = {
  title: 'MuiTable',
  component: MuiTable,
};

export default meta;

// 基础表格
export const Basic = () => (
  <MuiTable
    columns={[
      { title: '姓名', dataIndex: 'name', key: 'name' },
      { title: '年龄', dataIndex: 'age', key: 'age' },
      { title: '地址', dataIndex: 'address', key: 'address' },
    ]}
    dataSource={[
      { name: '张三', age: 20, address: '北京市朝阳区' },
      { name: '李四', age: 25, address: '上海市浦东新区' },
      { name: '王五', age: 30, address: '广州市天河区' },
    ]}
  />
);

Basic.storyName = '基础表格';

// 带排序的表格
export const WithSorter = () => (
  <MuiTable
    columns={[
      { title: '姓名', dataIndex: 'name', key: 'name', sorter: true },
      { title: '年龄', dataIndex: 'age', key: 'age', sorter: true },
      { title: '地址', dataIndex: 'address', key: 'address' },
    ]}
    dataSource={[
      { name: '张三', age: 20, address: '北京市朝阳区' },
      { name: '李四', age: 25, address: '上海市浦东新区' },
      { name: '王五', age: 30, address: '广州市天河区' },
    ]}
  />
);

WithSorter.storyName = '排序功能';

// 自定义渲染
export const CustomRender = () => (
  <MuiTable
    columns={[
      { title: '姓名', dataIndex: 'name', key: 'name' },
      { 
        title: '年龄', 
        dataIndex: 'age', 
        key: 'age',
        render: (value: number) => `${value}岁` 
      },
      { 
        title: '标签', 
        dataIndex: 'tags', 
        key: 'tags',
        render: (tags: string[]) => (
          <div style={{ display: 'flex', gap: 8 }}>
            {tags.map(tag => (
              <span
                key={tag}
                style={{
                  padding: '2px 8px',
                  borderRadius: 4,
                  backgroundColor: '#e6f4ff',
                  color: '#1677ff',
                }}
              >
                {tag}
              </span>
            ))}
          </div>
        )
      },
    ]}
    dataSource={[
      { name: '张三', age: 20, tags: ['开发', '前端'] },
      { name: '李四', age: 25, tags: ['设计', 'UI'] },
      { name: '王五', age: 30, tags: ['产品', 'PM'] },
    ]}
  />
);

CustomRender.storyName = '自定义渲染';

// 带分页和加载状态的表格
export const WithPaginationAndLoading = () => {
  const [loading, setLoading] = useState(false);
  const [pagination, setPagination] = useState({
    current: 1,
    pageSize: 10,
    total: 100,
  });

  const handlePaginationChange = (page: number, pageSize: number) => {
    setLoading(true);
    // 模拟加载
    setTimeout(() => {
      setPagination({ ...pagination, current: page, pageSize });
      setLoading(false);
    }, 1000);
  };

  return (
    <MuiTable<DataType>
      columns={[
        { title: '姓名', dataIndex: 'name', key: 'name', sorter: true },
        { title: '年龄', dataIndex: 'age', key: 'age', sorter: true },
        { title: '地址', dataIndex: 'address', key: 'address' },
      ]}
      dataSource={[
        { name: '张三', age: 20, address: '北京市朝阳区', tags: [] },
        { name: '李四', age: 25, address: '上海市浦东新区', tags: [] },
        { name: '王五', age: 30, address: '广州市天河区', tags: [] },
      ]}
      loading={loading}
      pagination={{
        ...pagination,
        onChange: handlePaginationChange,
      }}
    />
  );
};

WithPaginationAndLoading.storyName = '分页和加载'; 